<template>
    <view>
        <date-filter-view :dateTypeList="filterList" @dateEvent="dateEvent"></date-filter-view>
        <view v-if="weightData.length > 0" class="charts-box">
            <qiun-data-charts
                type="column"
                :ontouch="true"
                :opts="opts"
                :eopts="{ seriesTemplate: { itemStyle: { normal: { barBorderRadius: [30, 30, 0, 0] } } } }"
                :chartData="Line"
                :echartsH5="true"
                :echartsApp="true"
                background="rgba(255,255,255,1)"
                :canvas2d="true"
                canvasId="weightStatisticsChart"
            />
        </view>
        <image v-if="weightData.length == 0" class="data_null" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/jianzhongnull.png"></image>
        <view class="bottom_data_view">
            <view class="bottom_data_cell">
                <label class="weight_title">累计减重</label>
                <label class="weight_des">选择统计周期内，体脂秤减重重量</label>
                <label class="weight_label">{{ allNum > 0 ? allNum.toFixed(2) : allNum }}kg</label>
            </view>
            <view class="bottom_data_cell">
                <label class="weight_title">累计减重次数</label>
                <label class="weight_des">选择统计周期内，用户到店次数</label>
                <label class="weight_label">{{ weightMainData.storeDays || 0 }}次</label>
            </view>
            <view class="bottom_data_cell">
                <label class="weight_title">累计减重时长</label>
                <label class="weight_des">用户初次到店日期到现在的天数</label>
                <label class="weight_label">{{
                    weightMainData.firstDays > 0 ? weightMainData.firstDays + '天' : '当前未到店'
                }}</label>
            </view>
        </view>
    </view>
</template>

<script>
import dateFilterView from '@/components/date-filter-view/date-filter-view.vue';
export default {
    components: {
        dateFilterView,
    },
    data() {
        return {
            allNum: 0,
            filterList: [
                {
                    type: 'week',
                    typeTitle: '周减重统计',
                },
                {
                    type: 'month',
                    typeTitle: '月减重统计',
                },
                {
                    type: 'year',
                    typeTitle: '年减重统计',
                },
            ],
            form: {
                beginDate: '',
                endDate: '',
            },
            weightData: [],
            weekList: [],
            Line: {
                categories: [],
                series: [],
            },
            weightMainData: {},
        };
    },
    onLoad() {},
    methods: {
        dateEvent(e) {
            const form = this.form;
            form.beginDate =
                e.type === 'week' ? e.beginDate : e.type === 'month' ? e.beginDate + '-01' : e.beginDate + '-01-01';
            form.endDate =
                e.type === 'week' ? e.endDate : e.type === 'month' ? e.endDate + '-31' : e.endDate + '-12-31';
            form.rankType = e.type === 'week' ? 1 : e.type === 'month' ? 2 : 3;
            form.rankType = e.type === 'week' ? 1 : e.type === 'month' ? 2 : 3;
            this.form = {
                ...form,
            };
            this.reqeustMain();
        },
        getEndDate() {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
        getBeginDate() {
            let eDate = new Date(this.getEndDate());
            let timestamp = eDate.getTime() - 7 * 24 * 3600 * 1000;
            let date = new Date(timestamp);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
        reqeustMain() {
            this.request
                .httpTokenJsonRequest('/mp-api/wx/weight/data/statistics', this.form, 'POST', false)
                .then((res) => {
                    if (res.code == 0 && res.data.dateList) {
                        let weightDay = {
                            data: [],
                        };

                        this.weightMainData = res.data;

                        /** 日期数组 */
                        let dateList = res.data.dateList || [];
                        /** 减重数组 */
                        let weightList = res.data.weightList || [];

                        /** 默认获取所有，当为月时，查询1号至当前日期所有数据 */
                        if (this.monthStatistics) {
                            const day = new Date().getDate();
                            dateList = dateList.slice(0, day);
                            weightList = weightList.slice(0, day);
                        }

                        this.Line.categories = [];
                        this.Line.series = [];

                        this.weightData = dateList;
                        this.weightData.forEach((item) => {
                            if (item) {
                                if (this.yearStatistics) {
                                    this.Line.categories.push(item.substring(5, 7));
                                } else {
                                    this.Line.categories.push(this.request.formatDate('m.d', item));
                                }
                                weightDay.name = '体重';
                            }
                        });

                        weightDay.data = weightList;
                        /** 减重数组求和 */
                        this.allNum = weightList.reduce((prev, curr) => prev + curr, 0);

                        this.Line.series.push(weightDay);
                    } else {
                        this.weightData = [];
                        this.allNum = 0;
                    }
                });
        },
    },
    computed: {
        rankType() {
            return this.form.rankType;
        },
        weekStatistics() {
            return this.rankType === 1;
        },
        monthStatistics() {
            return this.rankType === 2;
        },
        yearStatistics() {
            return this.rankType === 3;
        },
        opts() {
            let labelCount = 6;
            let categoryGap = 5;
            let rotateLabel = false;
            /** 周 */
            if (this.weekStatistics) {
                labelCount = 7;
            }
            /** 月 */
            if (this.monthStatistics) {
                const day = new Date().getDate();
                rotateLabel = true;
                categoryGap = day > 7 ? 3 : 5;
            }
            return {
                update: true,
                fontColor: '#999',
                dataLabel: false,
                color: ['#1A9476'],
                legend: {
                    show: false,
                },
                padding: [20, 10, 15, 10],
                touchMoveLimit: 24,
                xAxis: {
                    labelCount,
                    rotateLabel,
                    disableGrid: true,
                    gridColor: '#f6f6f6',
                    format: 'xAxisDemo1',
                },
                yAxis: {
                    splitNumber: 1,
                    gridColor: '#f6f6f6',
                    data: [
                        {
                            tofix: 2,
                        },
                    ],
                },
                extra: {
                    column: {
                        categoryGap,
                        type: 'group',
                        width: 30,
                        activeBgOpacity: 0,
                        seriesGap: 5,
                        barBorderRadius: [20, 20, 0, 0],
                        activeBgColor: '#000000',
                        activeBgOpacity: 0.08,
                    },
                    tooltip: {
                        showArrow: false,
                        bgColor: '#F2F8F7',
                        fontColor: '#333',
                        borderOpacity: 1,
                        borderRadius: 4,
                    },
                    markLine: {
                        type: 'dash',
                    },
                },
            };
        },
    },
};
</script>

<style scoped>
.bottom_data_view {
    background-color: #fff;
    margin-top: 20rpx;
    width: 100%;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
}

.bottom_data_cell {
    height: 144rpx;
    border-bottom: #f6f6f6 1rpx solid;
    width: calc(100% - 60rpx);
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    position: relative;
}

.weight_label {
    top: 52rpx;
    float: right;
    right: 30rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    position: absolute;
}

.weight_title {
    margin-top: 30rpx;
    margin-left: 30rpx;
    color: #333333;
    font-size: 28rpx;
}

.weight_des {
    margin-top: 8rpx;
    margin-left: 30rpx;
    color: #999999;
    font-size: 28rpx;
}

.data_null {
    display: block;
    width: 100%;
    height: 520rpx;
}

.charts-box {
    width: 100%;
    height: 520rpx;
    background: #fff;
}
</style>
